<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nim</title>
<link href="stylesheets/application.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/jquery.notice.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/facybox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/facybox_urls.css" media="screen" rel="stylesheet" type="text/css" />

<script src="javascripts/jquery-1.8.2.min.js"></script>
<script src="javascripts/jquery.notice.js"></script>
<script src="javascripts/facybox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $('a[rel*=facybox]').facybox();
});

$(function(){
  if(!("WebSocket" in window)) {
    $('#chat1').text("WebSocket NOT supported by your Browser!");
    return;
  }

  var url;
  var s = getParameterByName('s');
  switch(s)
  {
    case 's1':
      url = 'ws://localhost:8081';
      break;
    case 's2':
      url = 'ws://localhost:8082';
      break;
    default:
      url = 'ws://localhost:8081';
      break;
  }
  var ws = new WebSocket(url);
  

  var users = new Array();
  // users.push('taka');
  // users.push('jeffrey');
  // console.log(users.sort(function(a, b){ return a > b; }));

  // 登录
  $('#login-button').click(function(){
    ws.send(JSON.stringify({
      action: 'login',
      username: $('#login_username').val(),
      pass: $('#login_password').val()
    }));
  });

  // 注册
  $('#signup-button').click(function(){
    ws.send(JSON.stringify({
      action: 'signup',
      username: $('#username').val(),
      pass: $('#password').val(),
      email: $('#email').val()
    }));
  });

  

  // $('a.signup-window').click(function() {
  //   var box = $(this).attr('href');

  //   $(box).fadeIn(300);
    
  //   var popMargTop = ($(box).height() + 24) / 2; 
  //   var popMargLeft = ($(box).width() + 24) / 2; 
    
  //   $(box).css({ 
  //     'margin-top' : -popMargTop,
  //     'margin-left' : -popMargLeft
  //   });
    
  //   $('body').append('<div id="mask"></div>');
  //   $('#mask').fadeIn(300);
    
  //   return false;
  // });
  
  // $('a.close, #mask').live('click', function() { 
  //   $('#mask , .signup-popup').fadeOut(300 , function() {
  //     $('#mask').remove();  
  //   }); 
  //   return false;
  // });

  ws.onmessage = function(evt) { 

    var data = JSON.parse(evt.data);
    if(data) {
      switch(data.action) {
        case 'initialize': // 初始化
          document.title = data.title;
          popToChat2(data.message);
          break;
        case 'syspop': // 私聊消息
          popToChat2(data.message);
          break;
        case 'notice': // 弹框消息
          $.noticeAdd({text: data.message});
          break;
        case 'chat1pop': // 公聊新消息
          popToChat1(data.username + ': ' + data.message);
          break;
        case 'chat2pop': // 私聊新消息
          popToChat2(data.username + ': ' + data.message);
          break;
        case 'login.ok': // 登录成功 { username: user.username }
          $('#user').text(data.username);
          $('#user').show();

          $('#login').hide();
          $('#signup-box').hide();
          $.noticeAdd({text: '登录成功'});
          break;
        case 'logout.ok': // 退出成功 
          $('#user').text('');
          $('#user').hide();

          $('#login').show();
          $('#signup-box').show();
          $.noticeAdd({text: '退出成功'});
          break;
        case 'signup.ok': // 注册成功 { username: user.username }
          $('#user').text(data.username);
          $('#user').show();

          $('#login').hide();
          $('#signup-box').hide();
          $.noticeAdd({text: '注册成功'});
          break;
      }
    }
  };

  ws.onopen = function(open) {
    console.log(ws);
  };

  ws.onclose = function(close) {
    popToChat1('type:' + close.type 
      + ', wasClean:' + close.wasClean 
      + ', code:' + close.code 
      + ', reason:' + close.reason);
  };

  ws.onerror = function(error) {
    popToChat1('type:' + error.type);
  };

  
});


function popToChat1(message)
{
  popToChat('chat1', message)
}

function popToChat2(message)
{
  popToChat('chat2', message)
}

function popToChat(id, message)
{
  var pre = document.createElement("p");
  pre.style.wordWrap = "break-word";
  pre.innerHTML = message;
  $('#' + id).append(pre);
}

function addToUserlist(users)
{
  //users.sort(function(a, b){ return a > b; })
   $.each(users, function(i, user){
    var pre = document.createElement("span");
    pre.style.paddingLeft = '10px';
    pre.innerHTML = user.who;
    $('#userlist').append(pre);
  });
}

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
</head>
<body>
<div class="container">
  <div id="content">
    <div id="login">
      <span class="label">Username:</span>
      <input type="text" id="login_username" />
      <span class="label">Password:</span>
      <input type="password" id="login_password" />
      <input type="button" id="login_button" value="Sign in" />
     
      <a href="javascript:;" rel="facybox.bolder">Sign up</a>
    </div>
    

    <div id="signup-box" class="signup-popup">
      <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
      <form method="post" class="signup" action="#">    
        <fieldset class="textbox">
          <label class="username">
            <span>Username</span>
            <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
          </label>
          <label class="password">
            <span>Password</span>
            <input id="password" name="password" value="" type="password" placeholder="Password">
          </label>
          <label class="email">
            <span>Email (OPTIONAL)</span>
            <input id="email" name="email" value="" type="text" autocomplete="on" placeholder="Email">
          </label>
          <button class="submit button" type="button">Sign up</button>
          <p>
            <a class="forgot" href="#">Forgot your password?</a><!-- TODO -->
          </p>        
        </fieldset>
      </form>
    </div>

    <div id="user"></div>

    <div id="chat1" class="chat black-b left-f"></div>
    <div id="chat2" class="chat blue-b left-f"></div>

    <div id="userlist" class="black-b left-f"></div>
  <div>
</div>
</body>
</html>
